<script lang="ts">
import type { UserRole } from '@/api/auth/auth';
import { Component, Prop, Vue } from 'vue-facing-decorator';

@Component({})
export default class UserTag extends Vue {
  @Prop() role!: UserRole;

  get roleColor() {
    return {
      admin: 'danger',
      mod: 'warning',
      user: 'info',
    }[this.role];
  }
  get roleText() {
    return {
      admin: 'Admin',
      mod: 'Mod',
      user: 'User',
    }[this.role];
  }
}
</script>
<template>
<el-tag disable-transitions class="user-tag" :type="roleColor" effect="dark" v-bind="$attrs">{{ roleText }}</el-tag>
</template>
<style scoped>
</style>
